<template>
  <div class="character_main">
    <div class="add_background" @click="add_close" id="add_background">
      <div class="add" @click="stop" id="add">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="Character Name:">
            <el-input
              v-model="add_characterName"
              placeholder="Character Name"
            ></el-input>
          </el-form-item>
          <el-form-item label="Character Introduction:">
            <el-input
              v-model="add_Introduction"
              placeholder="Character Introduction"
            ></el-input>
          </el-form-item>
          <el-form-item label="Character enable menu:">
            <el-select
              v-model="value"
              @change="getValue"
              filterable
              multiple
              placeholder="Please choose"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <br />
          <el-form-item>
            <el-button type="primary" v-on:click="addCharacter">
              Add
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="character_search">
      <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="Character Name:">
          <el-input
            v-model="search_characterName"
            placeholder="Character Name"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-on:click="getCharacterData">
            Search
          </el-button>
        </el-form-item>
      </el-form>
    </div>

    <div class="modify_background" @click="modify_close" id="modify_background">
      <div class="modify" @click="modify_stop" id="modify">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="Character Name:">
            <el-input
              v-model="modify_characterName"
              placeholder="Character Name"
            ></el-input>
          </el-form-item>
          <el-form-item label="Character Introduction:">
            <el-input
              v-model="modify_Introduction"
              placeholder="Character Introduction"
            ></el-input>
          </el-form-item>
          <el-form-item label="Character enable menu:">
            <el-select
              v-model="value"
              @change="getValueModify"
              filterable
              multiple
              placeholder="Please choose"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <br />
          <el-form-item>
            <el-button type="primary" v-on:click="modifyCharacter">
              Modify
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div
      style="
        background-color: rgb(245, 255, 255);
        text-align: left;
        padding-left: 20px;
      "
    >
      <el-button type="primary" v-on:click="btn_add">Add</el-button>
    </div>
    <div class="main_table">
      <el-table :data="tableData" @row-click="openDetails">
        <el-table-column prop="no" label="ID"></el-table-column>
        <el-table-column
          prop="characterName"
          label="Character"
        ></el-table-column>
        <el-table-column
          prop="characterInfo"
          label="Introduction"
        ></el-table-column>
        <el-table-column prop="menuName" label="Enable menu"></el-table-column>
        <el-table-column label="Action">
          <el-button @click="btn_modify">Modify</el-button>
        </el-table-column>
      </el-table>
    </div>
    <div class="page_nav_character">
      <el-pagination
        @current-change="handleCurrentChange"
        :page-size="5"
        layout="total, prev, pager, next"
        :total="totalPage"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import axios from "axios";
let add_menuId=[];
let modify_menuId=[];
let modifyCharacterId;
export default {
  name: "character",
  data() {
    return {
      tableData: [],
      totalPage: 0,
      characterName:"",
      search_characterName:"",
      options: [],
      add_characterName:"",
      add_Introduction:"",
      value:"",
      modify_characterName:"",
      modify_Introduction:"",
    };
  },
  created() {},
  methods: {
    getCharacterData() {
      let user = JSON.parse(sessionStorage.getItem("user"));
      let token = sessionStorage.getItem("token");
      let that = this;
      axios({
        headers: {
          token: token,
        },
        method: "Get",
        url: "http://localhost:8081/character-info/getCharacter",
        params: {
          id: that.id,
          characterName: that.search_characterName,
          menuId: that.menuId,
        },
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        if (result.data.code === "0") {
          that.totalPage = result.data.data.totalCount;
          let x = 1;
          for (let i of result.data.data.data) {
            if (i.menuName == null) {
              i.menuName = "(none)";
            }
            i.no = x++;
          }
          that.tableData = result.data.data.data;
        } else {
          that.totalPage = 0;
          that.tableData = null;
          alert(result.data.msg);
        }
      });
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      let user = JSON.parse(sessionStorage.getItem("user"));
      let token = sessionStorage.getItem("token");    
      let that = this;
      axios({
        headers: {
          token: token,
        },
        method: "Get",
        url: "http://localhost:8081/character-info/getCharacter",
        params: {
          id: that.id,
          characterName: that.search_characterName,
          menuId: that.menuId,
          pageNo: val,
        },
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        if (result.data.code === "0") {
          that.totalPage = result.data.data.totalCount;
          let x = 1;
          for (let i of result.data.data.data) {
            if (i.menuName == null) {
              i.menuName = "(none)";
            }
            i.no = x++;
          }
          that.tableData = result.data.data.data;
        } else {
          that.totalPage = 0;
          that.tableData = null;
          alert(result.data.msg);
        }
      });
    },
    btn_modify() {
        var btn = document.getElementById("modify_background");
        btn.style.display = "block";
    },
    modify_close(){
        var btn = document.getElementById("modify_background");
        btn.style.display = "none";
    },
    modify_stop(){
        event.stopPropagation();
    },
    btn_add() {
        var btn = document.getElementById("add_background");
        btn.style.display = "block";
    },
    add_close() {
        var btn = document.getElementById("add_background");
        btn.style.display = "none";
    },
    stop(){
        event.stopPropagation();
    },
    loadMenu() {
      let user = JSON.parse(sessionStorage.getItem("user"));
      let token = sessionStorage.getItem("token");   
      let that = this;
      let resultData;
      let returnData = [];
      axios({
        headers: {
          token: token,
        },
        method: "Get",
        url: "http://localhost:8081/menu-info/getMenu?pageMax=20",
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        resultData = result.data.data.data;
        if (result.data.code === "0") {
          for (let i in resultData) {
            returnData.push({
              value: resultData[i].menuName,
              id: resultData[i].id,
            });
          }
          that.options = returnData;
        } else {
          alert(result.data.msg);
        }
      });
    },
    getValue(id){
      add_menuId = [];
      for (let i in id) {
        add_menuId.push(id[i]);
      }
    },
    getValueModify(id){
        modify_menuId = [];
         for (let i in id) {
        modify_menuId.push(id[i]);
      }
    },
    openDetails(row) {
        this.modify_characterName = row.characterName;
        this.modify_Introduction = row.characterInfo;
        modifyCharacterId = row.id;
    },
    addCharacter(){
      let that = this;
      let user = JSON.parse(sessionStorage.getItem("user"));
      let token = sessionStorage.getItem("token");   
      axios({
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          token: token,
        },
        method: "Post",
        url: "http://localhost:8081/user-admin/addCharacter",
        data: JSON.stringify({
          uid: user.uid,
          characterName:that.add_characterName,
          characterInfo:that.add_Introduction,
          menuId:add_menuId
        }),
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        if (result.data.code === "0") {
          that.getCharacterData();
         var btn = document.getElementById("add_background");
        btn.style.display = "none";
        } else {
          alert(result.data.msg);
        }
      });
    },
    modifyCharacter(){
       let that = this;
       let user = JSON.parse(sessionStorage.getItem("user"));
      let token = sessionStorage.getItem("token");   
      axios({
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
          token: token,
        },
        method: "Post",
        url: "http://localhost:8081/user-admin/modifyCharacter",
        data: JSON.stringify({
          uid: user.uid,
          characterName:that.modify_characterName,
          characterInfo:that.modify_Introduction,
          menuId:modify_menuId,
          id:modifyCharacterId
        }),
      }).then(function (r) {
        let result = JSON.parse(JSON.stringify(r));
        if (result.data.code === "0") {
          that.getCharacterData();
         var btn = document.getElementById("modify_background");
        btn.style.display = "none";
        } else {
          alert(result.data.msg);
        }
      });
    },
  },
  mounted() {
      this.getCharacterData();
      this.loadMenu();
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body,
#character {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.page_nav_character{
  height: 12%;
}
.character_main {
  width: 98%;
  margin: auto;
  height: 100%;
  background-color: rgb(255, 255, 255);
  border-radius: 15px;
  box-shadow: gray 5px 5px 10px;
}
.character_search {
  padding-top: 20px;
  width: 100%;
  height: 10%;
  background-color: aliceblue;
  border-radius: 15px 15px 0px 0px;
}
.main_table {
  height: 70%;
}
.add {
  padding: 5%;
  z-index: 10;
  position: absolute;
  width: 600px;
  height: 400px;
  background-color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px 15px 15px 15px;
}
.add_background {
  z-index: 9;
  position: absolute;
  width: 3000px;
  height: 3000px;
  background-color: rgba(0, 0, 0, 0.5);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}

.modify {
  padding: 5%;
  z-index: 10;
  position: absolute;
  width: 600px;
  height: 400px;
  background-color: white;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 15px 15px 15px 15px;
}
.modify_background {
  z-index: 9;
  position: absolute;
  width: 3000px;
  height: 3000px;
  background-color: rgba(0, 0, 0, 0.5);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
</style>
